Security News
Python Overtakes JavaScript as Top Programming Language on GitHub
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
@lit-labs/react
Advanced tools
@lit-labs/react is an npm package that provides utilities for integrating Lit components with React. It allows developers to use Lit-based web components seamlessly within React applications.
Creating React Components from Lit Elements
This feature allows you to create React components from Lit elements. The `createComponent` function takes React, the tag name of the custom element, and the Lit element class, and returns a React component that can be used in your React application.
import { createComponent } from '@lit-labs/react';
import * as React from 'react';
import { MyElement } from 'my-element';
const MyReactComponent = createComponent(React, 'my-element', MyElement);
export default MyReactComponent;
Passing Properties and Events
This feature allows you to pass properties and events from React to Lit elements. The fourth argument to `createComponent` is an object that maps React props to Lit element properties and events.
import { createComponent } from '@lit-labs/react';
import * as React from 'react';
import { MyElement } from 'my-element';
const MyReactComponent = createComponent(React, 'my-element', MyElement, {
onClick: 'click',
onCustomEvent: 'custom-event'
});
export default MyReactComponent;
The `react-web-component` package allows you to create web components from React components. It provides a way to use React components as custom elements, which can then be used in any web application. Unlike @lit-labs/react, which focuses on integrating Lit elements into React, `react-web-component` focuses on the opposite direction.
The `reactify-wc` package is another utility for integrating web components with React. It provides a higher-order component (HOC) that wraps a web component and makes it usable in React. This package is similar to @lit-labs/react but offers a different API for achieving the same goal.
React integration for Web Components and Reactive Controllers.
This package has graduated from labs! It is now available as @lit/react
. This package is just a proxy that re-exports @lit/react
. As a result, while it will no longer be updated, it will continue to work and get updates through the ^1.0.0 version range of @lit/react
. This should reduce duplication of code while the ecosystem migrates their imports away from @lit-labs/react
.
If you're looking at this locally or on GitHub, you can now find the README here: README.md.
If you're looking at this online, you can also find its README on npmjs: https://www.npmjs.com/package/@lit/react
FAQs
A React component wrapper for web components.
The npm package @lit-labs/react receives a total of 673,190 weekly downloads. As such, @lit-labs/react popularity was classified as popular.
We found that @lit-labs/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
Security News
Dutch National Police and FBI dismantle Redline and Meta infostealer malware-as-a-service operations in Operation Magnus, seizing servers and source code.
Research
Security News
Socket is tracking a new trend where malicious actors are now exploiting the popularity of LLM research to spread malware through seemingly useful open source packages.